<template>
  <div>
    <div id="calendarCharts"></div>
  </div>
</template>
 
<script>
import * as echarts from "echarts";
export default {
  // name: 'v-calendarCharts',
  data() {
    return {};
  },
  mounted() {
    this.getValue();
  },
  methods: {
    getValue() {
      var timeDate = [];
      var countSum = [];
      var rewardSum = [];
      var avgCountReward = [];
      var avgMinuteReward = [];
      var i;

      this.$ajax.get("/order_statistic_month").then(res => {
        console.log(res.data);
        function formatDate(now) {
          var year = now.getFullYear();
          var month = now.getMonth() + 1;
          var date = now.getDate();
          return year + "-" + month + "-" + date;
        }
        // console.log(Object.keys(res.data).length); //json数据长度
        // 日期
        for (i = 0; i < Object.keys(res.data).length; i++) {
          var g = res.data[i].date; //定义一个时间戳变量
          var d = new Date(g); //创建一个指定的日期对象
          timeDate.push(formatDate(d));
        }
        // 总数
        for (i = 0; i < Object.keys(res.data).length; i++) {
          countSum.push(res.data[i].count);
        }
        // 总收益
        for (i = 0; i < Object.keys(res.data).length; i++) {
          rewardSum.push(res.data[i].reward);
        }

        //每单收益
        for (i = 0; i < Object.keys(res.data).length; i++) {
          avgCountReward.push(res.data[i].avg_count_reward);
        }
        // 总分钟收益
        for (i = 0; i < Object.keys(res.data).length; i++) {
          avgMinuteReward.push(res.data[i].avg_minute_reward);
        }

        var calendarCharts = echarts.init(
          document.getElementById("calendarCharts")
        );

        function getCountData() {
          var countdata = [];
          for (i = 0; i < Object.keys(res.data).length; i++) {
            countdata.push([timeDate[i], countSum[i]]);
          }
          // console.log(data[0]);
          return countdata;
        }

        function getRewardData() {
          var rewarddata = [];
          for (i = 0; i < Object.keys(res.data).length; i++) {
            rewarddata.push([timeDate[i], rewardSum[i]]);
          }
          return rewarddata;
        }

        function getAvgCountData() {
          var avgcount = [];
          for (i = 0; i < Object.keys(res.data).length; i++) {
            avgcount.push([timeDate[i], avgCountReward[i]]);
          }
          return avgcount;
        }

        function getAvgMinuteData() {
          var avgminute = [];
          for (i = 0; i < Object.keys(res.data).length; i++) {
            avgminute.push([timeDate[i], avgMinuteReward[i]]);
          }
          return avgminute;
        }

        var graphData = getCountData();

        var links = graphData.map(function(item, idx) {
          return {
            source: idx,
            target: idx + 1
          };
        });
        links.pop();

        var option = {
          tooltip: {
            position: "top"
          },
          visualMap: [
            {
              min: 180000,
              max: 220000,
              inRange: {
                color: ["grey"],
                opacity: [0, 1]
              },
              controller: {
                inRange: {
                  opacity: [0.3, 0.6]
                },
                outOfRange: {
                  color: "#ccc"
                }
              },
              seriesIndex: [1],
              orient: "horizontal",
              left: "15%",
              bottom: 400
            },
            {
              min: 0.17,
              max: 0.19,
              calculable: true,
              seriesIndex: [2],
              orient: "horizontal",
              left: "65%",
              bottom: 380
            },
            {
              min: 3.7,
              max: 4.1,
              calculable: true,
              seriesIndex: [3],
              orient: "horizontal",
              left: "15%",
              bottom: 30
            },
            {
              min: 650000,
              max: 900000,
              calculable: true,
              seriesIndex: [4],
              orient: "horizontal",
              left: "65%",
              bottom: 40
            }
          ],
          calendar: [
            {
              orient: "vertical",
              yearLabel: {
                show: false
              },
              monthLabel: {
                nameMap: "cn",
                margin: 20
              },
              dayLabel: {
                firstDay: 1,
                nameMap: "cn"
              },
              cellSize: 40,
              range: "2016-11"
            },
            {
              orient: "vertical",
              yearLabel: {
                show: false
              },
              monthLabel: {
                nameMap: "cn",
                margin: 20
              },
              dayLabel: {
                firstDay: 1,
                nameMap: "cn"
              },
              cellSize: 40,
              left: 550,
              range: "2016-11"
            },
            {
              orient: "vertical",
              yearLabel: {
                show: false
              },
              monthLabel: {
                nameMap: "cn",
                margin: 20
              },
              dayLabel: {
                firstDay: 1,
                nameMap: "cn"
              },
              cellSize: 40,
              top: 380,
              range: "2016-11"
            },
            {
              orient: "vertical",
              yearLabel: {
                show: false
              },
              dayLabel: {
                firstDay: 1,
                nameMap: "cn"
              },
              monthLabel: {
                nameMap: "cn",
                margin: 20
              },
              cellSize: 40,
              top: 380,
              left: 550,
              range: "2016-11"
            }
          ],
          series: [
            {
              type: "graph",
              edgeSymbol: ["none", "arrow"],
              coordinateSystem: "calendar",
              links: links,
              symbolSize: 10,
              calendarIndex: 0,
              data: graphData
            },
            {
              type: "heatmap",
              coordinateSystem: "calendar",
              data: getCountData()
            },
            {
              type: "effectScatter",
              coordinateSystem: "calendar",
              calendarIndex: 1,
              symbolSize: function(val) {
                return val[1] * 60;
              },
              data: getAvgMinuteData()
            },
            {
              type: "scatter",
              coordinateSystem: "calendar",
              calendarIndex: 2,
              symbolSize: function(val) {
                return val[1] * 5;
              },
              data: getAvgCountData()
            },
            {
              type: "heatmap",
              coordinateSystem: "calendar",
              calendarIndex: 3,
              data: getRewardData()
            }
          ]
        };
        calendarCharts.setOption(option);
      });
    }
  },
  watch: {},
  created() {}
};
</script>

<style scoped>
#calendarCharts {
  width: 100%;
  height: 700px;
  /* border: 1px solid red; */
  margin: 0 auto;
}
</style>
